<template>
    <div class="app-container">
        <div class="demo-image">
            <el-row>
                <el-col :span="4" v-for="item in list" :key="item.name">
                    <div class="block">
                        <el-image
                            style="max-width: 98%;max-height:98% "
                            :src="item.path"
                            fit="contain"
                            ></el-image>
                            <span class="demonstration">文件名</span>
                        </div>
                </el-col>
            </el-row>
        </div>
        <div style="text-align: center;margin-top: 30px;">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :current-page.sync="listQuery.page"
                :page-size="listQuery.pagesize"
                @current-change="current_change">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { captures } from '@/api/channel'
    export default {
        data() {
            return {

                listQuery: {
                    page: 1,
                    pagesize: 2,
                    device: undefined,
                },
                list: null,
                total: 0,   // 记录数量
                listLoading: true,
            }
        },
        created() {
            this.listQuery.page =1
            this.fetchData()
        },
        methods:{
            fetchData() {
                this.listLoading = true
                captures(this.listQuery).then(response => {
                    this.list = response.data.items
           
                    this.listLoading = false
                    this.total = response.data.total
                })
                },
            current_change: function(page) {
                this.listQuery.page = page
                this.fetchData()
            },
        }
    }
</script>
<style scoped>
    div.block{text-align:center}
    .demonstration{font-size:0.8rem}
</style>